import React, { Component } from 'react'
import '../../common/common.css'
//创建 Context对象
const MyContext = React.createContext()
const { Provider, Consumer } = MyContext
export default class ContextComponent extends Component {
    state = { username: 'tom', age: 18 }
    render() {
        const { username, age } = this.state
        return (
            <div className="parent">
                <div className="explain">
                    <button className='returnButton'><a href="/">点击返回主菜单</a></button>
                    <h1>Context使用</h1>
                    <p>
                        一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信。<br />
                        思路：<br />
                        使用的方式相当于把需要传递的数据放在公共区域,然后谁需要使用就声明使用,
                        不声明使用的无法拿到这个值。<br />
                        实现：<br />
                        a组件有username和age两个属性,然后通过创建Context对象,作为提供者Provider,
                        包裹着b组件,这样b组件及其子组件都可以覆盖到。b组件不声明所以也就拿不到,
                        class组件通过声明 static contextType = MyContext进行使用(仅限类组件),
                        而函数式组件通过 Consumer 标签进行使用,当然这个 Consumer 标签也适用于类组件。<br />
                        注意:在应用开发中一般不用context, 一般都用它的封装react插件
                    </p>
                </div>
                <h3>我是A组件</h3>
                <h4>我的用户名是:{username}</h4>
                <Provider value={{ username, age }}>
                    <B />
                </Provider>
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div className="child">
                <h3>我是B组件</h3>
                <C />
                <D />
            </div>
        )
    }
}

class C extends Component {
    //声明接收context
    static contextType = MyContext
    render() {
        const { username, age } = this.context
        return (
            <div className="grand">
                <h3>我是C组件</h3>
                <h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
            </div>
        )
    }
}

function D() {
    return (
        <div className="grand">
            <h3>我是D组件</h3>
            <h4>我从A组件接收到的用户名:
                <Consumer>
                    {value => `${value.username},年龄是${value.age}`}
                </Consumer>
            </h4>
        </div>
    )
}